<template>
	<div class="timePicker">
		<div class="time-picker" v-if="type === 'time'">
			<div class="uinput">
				<div>{{ timeValue ? timeValue : placeholder }}</div>
				<uni-icons v-if="clearable && !readonly" class="close" :type="timeValue ? 'clear' : ''" color="#c4c4cf" size="18" @click="close" style="line-height: 1"></uni-icons>
				<image v-if="!readonly" src="/static/forms/history.png" class="image" @click="open" :style="{ marginLeft: clearable ? '0' : 'auto' }"></image>
			</div>
			<u-picker v-model="show" mode="time" :params="params" @confirm="onConfirm"></u-picker>
		</div>
		<div class="range" v-else-if="type === 'timeRange'">
			<div class="timerange">
				<div class="left">
					<div style="display: flex; align-items: center">
						<input :readonly="readonly" :disabled="disabled" ref="inputStart" class="uni-input start" v-model="rangeValueStart" :placeholder="startPlaceholder" @click="openRangeStart" placeholder-style="display:flex;justify-content:center;align-items: center;font-size:28rpx" />
						<!-- <uni-icons v-if="clearStart" type="clear" size="18" color="#c2c7ce" @click="startClose"></uni-icons> -->
					</div>
					<u-picker v-model="showRangeStart" mode="time" :params="params" @confirm="onStartConfirm"></u-picker>
				</div>
				<div class="text">{{ separator }}</div>
				<div class="right">
					<div style="display: flex; align-items: center">
						<input :readonly="readonly" :disabled="disabled" ref="inputEnd" class="uni-input end" v-model="rangeValueEnd" :placeholder="endPlaceholder" @click="openRangeEnd" placeholder-style="display:flex;justify-content:center;align-items: center;font-size:28rpx" />
						<!-- <uni-icons v-if="clearEnd" type="clear" size="18" color="#c2c7ce" @click="closeEnd"></uni-icons> -->
					</div>
					<u-picker v-model="showRangeEnd" mode="time" :params="params" @confirm="onEndConfirm"></u-picker>
				</div>
			</div>
			<uni-icons class="clear" v-if="clear && !readonly" type="clear" size="18" color="#c2c7ce" @click="closeRange"></uni-icons>
		</div>
	</div>
</template>

<script>
export default {
	name: "vTimePicker",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [String, Object, Array],
			default: "",
		},
		placeholder: {
			type: String,
			default: "时间选择",
		},
		type: {
			type: String,
			default: "time", //time timeRange,
		},
		selectable: {
			type: Object,
			default: () => {},
		},
		format: {
			type: String,
			default: "HH:mm:ss",
		},
		clearable: {
			type: Boolean,
			default: false,
		},
		startPlaceholder: {
			type: String,
			default: "开始时间",
		},
		endPlaceholder: {
			type: String,
			default: "结束时间",
		},
		separator: {
			type: String,
			default: "-",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			show: false,
			showRangeStart: false,
			showRangeEnd: false,
			params: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: true,
			},
			rangeValueStart: "",
			rangeValueEnd: "",
			clearVisible: false,
		}
	},
	mounted() {
		// console.log(this.$refs.inputStart.focus, "this.$refs.inputStart")
		// this.$refs.inputStart.focus
		// this.$refs.inputEnd.focus
	},
	computed: {
		timeValue: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit("update:value", val)
			},
		},
		clearStart() {
			return this.clearable && this.rangeValueStart
		},
		clearEnd() {
			return this.clearable && this.rangeValueEnd
		},
		clear() {
			return this.clearable && this.rangeValueStart && this.rangeValueEnd
		},
	},
	methods: {
		open() {
			if (this.disabled || this.readonly) return
			this.show = true
		},
		openRangeStart() {
			if (this.disabled || this.readonly) return
			if (this.clearable) {
				this.clearVisible = true
			}
			this.showRangeStart = true
		},

		openRangeEnd() {
			if (this.disabled || this.readonly) return
			if (this.clearable) {
				this.clearVisible = true
			}
			this.showRangeEnd = true
		},
		onConfirm(val) {
			if (this.params.hour && this.params.minute && this.params.second) {
				this.timeValue = `${val.hour}:${val.minute}:${val.second}`
			}
			if (this.params.hour && this.params.minute && !this.params.second) {
				this.timeValue = `${val.hour}:${val.minute}`
			}
			if (this.params.hour && !this.params.minute && this.params.second) {
				this.timeValue = `${val.hour}:${val.second}`
			}
			if (!this.params.hour && this.params.minute && this.params.second) {
				this.timeValue = `${val.minute}:${val.second}`
			}
			if (this.params.hour && !this.params.minute && !this.params.second) {
				this.timeValue = `${val.hour}`
			}
			if (!this.params.hour && this.params.minute && !this.params.second) {
				this.timeValue = `${val.minute}`
			}
			if (!this.params.hour && !this.params.minute && this.params.second) {
				this.timeValue = `${val.second}`
			}
			if (this.selectable) {
				let index = this.selectable.selectableRange.indexOf("-")
				let prev = this.selectable.selectableRange.slice(0, index)
				let next = this.selectable.selectableRange.slice(index + 1)
				if (this.timeValue.replace(/:/g, "") < prev.replace(/:/g, "")) {
					this.timeValue = prev
				}
				if (this.timeValue.replace(/:/g, "") > next.replace(/:/g, "")) {
					this.timeValue = next
				}
			}
		},
		onStartConfirm(val) {
			// console.log(this.rangeValueEnd.replace(/:/g, ""))
			if (this.rangeValueEnd.replace(/:/g, "") < `${val.hour}${val.minute}${val.second}` && this.rangeValueEnd) {
				uni.showToast({
					title: "开始时间不能大于结束时间",
					icon: "none",
				})
				return false
			}
			if (this.params.hour && this.params.minute && this.params.second) {
				this.rangeValueStart = `${val.hour}:${val.minute}:${val.second}`
			}
			if (this.params.hour && this.params.minute && !this.params.second) {
				this.rangeValueStart = `${val.hour}:${val.minute}`
			}
			if (this.params.hour && !this.params.minute && this.params.second) {
				this.rangeValueStart = `${val.hour}:${val.second}`
			}
			if (!this.params.hour && this.params.minute && this.params.second) {
				this.rangeValueStart = `${val.minute}:${val.second}`
			}
			if (this.params.hour && !this.params.minute && !this.params.second) {
				this.rangeValueStart = `${val.hour}`
			}
			if (!this.params.hour && this.params.minute && !this.params.second) {
				this.rangeValueStart = `${val.minute}`
			}
			if (!this.params.hour && !this.params.minute && this.params.second) {
				this.rangeValueStart = `${val.second}`
			}
			this.$emit("update:value", [this.rangeValueStart, this.rangeValueEnd])
		},
		onEndConfirm(val) {
			if (`${val.hour}${val.minute}${val.second}` < this.rangeValueStart.replace(/:/g, "")) {
				uni.showToast({
					title: "结束时间不能小于开始时间",
					icon: "none",
				})
				return false
			}
			if (this.params.hour && this.params.minute && this.params.second) {
				this.rangeValueEnd = `${val.hour}:${val.minute}:${val.second}`
			}
			if (this.params.hour && this.params.minute && !this.params.second) {
				this.rangeValueEnd = `${val.hour}:${val.minute}`
			}
			if (this.params.hour && !this.params.minute && this.params.second) {
				this.rangeValueEnd = `${val.hour}:${val.second}`
			}
			if (!this.params.hour && this.params.minute && this.params.second) {
				this.rangeValueEnd = `${val.minute}:${val.second}`
			}
			if (this.params.hour && !this.params.minute && !this.params.second) {
				this.rangeValueEnd = `${val.hour}`
			}
			if (!this.params.hour && this.params.minute && !this.params.second) {
				this.rangeValueEnd = `${val.minute}`
			}
			if (!this.params.hour && !this.params.minute && this.params.second) {
				this.rangeValueEnd = `${val.second}`
			}
			this.$emit("update:value", [this.rangeValueStart, this.rangeValueEnd])
		},
		close() {
			this.timeValue = ""
		},
		startClose() {
			this.rangeValueStart = ""
			this.clearVisible = false
		},
		endClose() {
			this.rangeValueEnd = ""
			this.clearVisible = false
		},
		closeRange() {
			this.rangeValueStart = ""
			this.rangeValueEnd = ""
		},
	},

	watch: {
		timeValue: {
			immediate: true,
			handler(val) {
				if (Array.isArray(val)) {
					this.rangeValueStart = val[0]
					this.rangeValueEnd = val[1]
				}
			},
		},

		format: {
			immediate: true,
			handler(val) {
				this.params = {
					year: false,
					month: false,
					day: false,
					hour: val.includes("HH"),
					minute: val.includes("mm"),
					second: val.includes("ss"),
				}
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.uinput {
	padding: 0 10rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	gap: 10rpx;
	// color: #74726b;
	color: #333;
	.close {
		margin-left: auto;
	}
	.image {
		width: 30rpx;
		height: 30rpx;
	}
}
.range {
	display: flex;
	.clear {
		width: 32rpx;
	}
}
.timePicker {
	width: 100%;
}
.timerange {
	display: flex;
	justify-content: center;
	align-items: center;
	// border: 1px solid #e5e5e5;
	border-radius: 8rpx;
	.text {
		color: #747774;
	}
	.input {
		padding-left: 20rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.end {
	padding-left: 10rpx;
}
</style>
